/**
 * Created by wangzilong on 2017/4/11.
 */
import React, { Component } from 'react';
import {
    AppRegistry,
    StyleSheet,
    Text,
    View,
    Image,
    ScrollView,
    TouchableOpacity,
    TextInput,
    ListView,
    Modal,
    Platform
} from 'react-native';
import ImageWrapper from '../components/ImageWrapper';
import NavigationBar from '../components/NavigationBar';
import JumpItem from '../components/JumpItem';
import userService from '../lib/services/userService';
import ImageCropPicker from 'react-native-image-crop-picker';
var Dimensions = require('Dimensions');
const { width, height } = Dimensions.get('window');

export default class SafeOfAccount extends Component{
    constructor(props) {
        super(props);
        this.state = {
            userData:this.props.navigation.state.params.userData,
            token:this.props.navigation.state.params.token,
            userName:this.props.navigation.state.params.userData.username,
            phone:this.props.navigation.state.params.userData.phone,
            headImgUrl:null,
            headImgData:null, 
        };
        
    }
    render(){
        return (
            <View style={styles.container}>
                <NavigationBar 
                    leftIcon={'left'} 
                    titleText={'账号与安全'}
                    leftPress={()=>this.goBack()}
                    rightText={'完成'}
                    rightTextStyle={{color:'#fff'}}
                    rightTextPress={()=>this.submitData()}/>

                <View style={styles.infoBox}>
                    <TouchableOpacity onPress={()=>this.choseImg()} style={{flexDirection:'row',alignItems:'center',height:60}}>
                        <View style={{flex:1}}>
                            <Text style={{fontSize:16,color:'#151515'}}>头像</Text>
                        </View>
                        <View>
                            {this.state.headImgUrl?<ImageWrapper width={40} height={40} icon={{uri:this.state.headImgUrl.path}} style={{borderRadius:10,marginRight:10}}/>:<ImageWrapper width={40} height={40} icon={this.state.userData.user_head_img?{uri:'http://test.520m.com.cn/upload/common/'+this.state.userData.user_head_img}:'touxiang'} style={{borderRadius:10,marginRight:10}}/>}
                            
                        </View>
                        <View>
                            <ImageWrapper style={{marginRight:10}} icon={'right'}/>
                        </View>
                    </TouchableOpacity>
                </View>
                <View style={styles.infoBox}>
                    <ItemLine onPress={()=>this.goEditUser(this.state.userName,0)} style={styles.itemStyle} title={'昵称'} defaultValue={this.state.userName}/>
                </View>
                <View style={styles.infoBox}>
                    <ItemLine  onPress={()=>this.goEditUser(this.state.phone,1)} style={styles.itemStyle} title={'手机号'} defaultValue={this.state.phone||'未绑定手机号'}/>
                </View>
            </View>
        )

    }

    goBack(){
        this.props.navigation.goBack();
    }

    submitData(){
        var $this = this;
        var obj = {};
        obj.userName = $this.state.userName;
        if(this.state.headImgData){
            var imgArr = [];
            imgArr['img0'] = this.state.headImgData.path;
            userService.userUpload(function(data){
                alert(JSON.stringify(data));
                if(data.code==10000){
                    obj.userImg = data.data[0];
                    $this.props.navigation.state.params.upData(obj);
                    $this.goBack();
                }
            },imgArr,$this.state.token)
        }else{
            $this.props.navigation.state.params.upData(obj);
            $this.goBack();
        }
        
    }
    goEditUser(data,index){
        var $this = this;
        var arr = ['修改昵称','绑定手机号'];
        const {navigate } = this.props.navigation;
        navigate('EditUser',{data:data,token:$this.state.token,title:arr[index],upData:(obj)=>{
            if(obj.name) {
                $this.setState({
                    userName:obj.userName
                })
            }else if(obj.phone){
                $this.setState({
                    phone:obj.phone
                })
            }
            
        }});
    }
    // 选择头像上传
    async choseImg(){
        var $this = this;
        ImageCropPicker.openPicker({
            width: 300, 
            height: 300, 
            cropping: true,
            mediaType:'photo',
        }).then(image => { 
            var source = {};
            alert(JSON.stringify(image))
            if (Platform.OS === 'android') {
                source = {path: image.path, isStatic: true};
            } else {
                source = {path: image.path.replace('file://', ''), isStatic: true};
            }
            this.setState({
                headImgUrl:source,
                headImgData:image,
            });
        }).catch((err)=> {
            console.log(err);
        });
    }
}
class ItemLine extends Component{
    render(){
        return(
            <TouchableOpacity onPress={this.props.onPress}>
                <View style={[this.props.style,{flexDirection:'row',alignItems:'center'}]}>
                    <View style={{flex:1}}>
                        <Text style={{color:'#151515'}}>{this.props.title}</Text>
                    </View>
                    <View>
                        <Text>{this.props.defaultValue}</Text>
                    </View>
                </View>
            </TouchableOpacity>
        )
    }
 }


const styles = StyleSheet.create({
    container:{
        flex:1,
        backgroundColor:'#EFEFF4',
        ...Platform.select({
            ios: {
                marginTop: 20
            },
            android: {
                marginTop:0
            },

        }),
    }, 
    infoBox:{
        backgroundColor:'#fff',
        paddingLeft:10,
        borderTopWidth:1,
        borderTopColor:'#E4E4E6',
        borderBottomWidth:1,
        borderBottomColor:'#E4E4E6',
        marginTop:20
    },
    middleInfo:{
        marginLeft:10,
        flex:1
    },
    lineBorder:{
        borderBottomColor:'#E4E4E6',
        borderBottomWidth:1
    },
    itemStyle:{
        height:40,
        paddingRight:15
    }
    
});